<template>
  <footer>
    <div class="onerouter">
      <div class="column">
        <h2>Resources</h2>
        <p>FAQs</p>
        <p>Mobile App Download</p>
      </div>
      <div class="column">
        <h2>Adopt or Get Involved</h2>
        <p>All Adopt or Get Involved</p>
        <p>Adopting Pets</p>
      </div>
      <div class="column">
        <h2>About Dogs &amp; Puppies</h2>
        <p>All About Dogs &amp; Puppies</p>
        <p>Dog Adoption</p>
      </div>
      <div class="column">
        <h2>About Cats &amp; Kittens</h2>
        <p>All About Cats &amp; Kittens</p>
        <p>Cat Adoption</p>
      </div>
    </div>
  </footer>
</template>

<script>

</script>

<style scoped>
footer {
  margin-top: 50px;
  background: linear-gradient(90deg, #ea580c 0%, #c2410c 100%);
  width: 100%;
  height: 170px;
  padding: 20px 0;
  color: white;
}

.footer-logo {
  width: 410px;
  height: 70px;
  margin: 0 auto;
  /* background-image: url("../assets/images/logozi.png"); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.onerouter {
position: relative;
bottom: 0;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.column {
  flex: 1;
  text-align: center;
  max-width: 250px;
}

.column h2 {
  margin: 0 0 10px 0;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fef3c7;
}

.column p {
  margin: 8px 0;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.column p:hover {
  color: #fef3c7;
}

.menu-link {
  color: white;
  text-decoration: none;
}

.menu-link.router-link-exact-active {
  color: #fef3c7;
}
</style>